<template>
  <view class="acme-search-bar" :style="{height: `${height}rpx`, background}">
    <view class="btn-back" :style="{lineHeight: `${height}rpx`}" @click="back" v-if="goBack">
      <i class="iconfont">&#xe671;</i>
    </view>
    <view class="container" :style="{height: `${inputHeight}rpx`, borderRadius: `${radius}rpx`}">
      <view class="left-wrap">
        
      </view>
      <view class="center-wrap">
        <i class="iconfont icon">&#xe692;</i>
        <input
          :value="value"
          :placeholder="placeholder"
          :focus="focus"
          confirm-type="search"
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
        />
        <i class="iconfont close" v-show="value && clearable" @click="reset">&#xe66f;</i>
      </view>
      <view class="right-wrap">
        
      </view>
    </view>
    <view class="cancel" @click="rightClick" v-if="rightText">{{rightText}}</view>
  </view>
</template>

<script>
  export default {
    name: "SearchBar",
    props: {
      value: String,
      // 输入框默认暗纹
      placeholder: {
        type: String,
        default: "请输入搜索关键字",
      },
      // 组件高度
      height: {
        type: Number,
        default: 110
      },
      // input 高度
      inputHeight: {
        type: Number,
        default: 60
      },
      // 背景
      background: {
        type: String,
        default: '#fff'
      },
      // 圆角
      radius: {
        type: Number,
        default: 0
      },
      // 右侧文字
      rightText: {
        type: String,
        default: ''
      },
      // 是否显示返回按钮
      goBack: {
        type: Boolean,
        default: false
      },
      // 获得焦点
      focus: {
        type: Boolean,
        default: false
      },
      // 是否启用清除图标
      clearable: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {};
    },
    methods: {
      handleInput(e) {
        this.$emit('input', e.target.value)
      },
      handleFocus(e) {
        this.$emit('focus', e)
      },
      handleBlur(e) {
        this.$emit('blur', e)
      },
      reset() {
        this.$emit('input', '')
        this.$emit('clear')
      },
      rightClick() {
        this.$emit('rightClick')
      },
      back() {
        uni.navigateBack()
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
